<script setup lang="ts">
import { ref } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { RouterLink } from 'vue-router'
import { useUserStore } from '../stores/user'

const { width } = useWindowSize()
const isMenuOpen = ref(false)
const userStore = useUserStore()

const handleLogout = () => {
  userStore.logout()
  // 关闭移动端菜单
  isMenuOpen.value = false
}
</script>

<template>
  <nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <RouterLink to="/" class="flex items-center">
            <span class="text-xl font-bold text-primary-600">家庭菜谱</span>
          </RouterLink>
        </div>
        
        <!-- 桌面端导航 -->
        <div class="hidden md:flex items-center space-x-4">
          <template v-if="userStore.isAuthenticated">
            <RouterLink to="/" class="text-gray-600 hover:text-primary-600">首页</RouterLink>
            <RouterLink to="/recipes" class="text-gray-600 hover:text-primary-600">所有菜谱</RouterLink>
            <RouterLink to="/weekly-plan" class="text-gray-600 hover:text-primary-600">周计划</RouterLink>
            <RouterLink to="/create-recipe" class="text-gray-600 hover:text-primary-600">创建菜谱</RouterLink>
            <RouterLink to="/profile" class="text-gray-600 hover:text-primary-600">家庭设置</RouterLink>
            <button
              @click="handleLogout"
              class="text-gray-600 hover:text-primary-600"
            >
              退出登录
            </button>
          </template>
          <template v-else>
            <RouterLink to="/login" class="text-gray-600 hover:text-primary-600">登录</RouterLink>
            <RouterLink to="/register" class="text-gray-600 hover:text-primary-600">注册</RouterLink>
          </template>
        </div>

        <!-- 移动端菜单按钮 -->
        <div class="md:hidden flex items-center">
          <button
            @click="isMenuOpen = !isMenuOpen"
            class="text-gray-600 hover:text-primary-600"
          >
            <svg
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                v-if="!isMenuOpen"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
              <path
                v-else
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div
      v-if="isMenuOpen"
      class="md:hidden"
    >
      <div class="px-2 pt-2 pb-3 space-y-1">
        <template v-if="userStore.isAuthenticated">
          <RouterLink
            to="/"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            首页
          </RouterLink>
          <RouterLink
            to="/recipes"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            所有菜谱
          </RouterLink>
          <RouterLink
            to="/weekly-plan"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            周计划
          </RouterLink>
          <RouterLink
            to="/create-recipe"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            创建菜谱
          </RouterLink>
          <RouterLink
            to="/profile"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            家庭设置
          </RouterLink>
          <button
            @click="handleLogout"
            class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
          >
            退出登录
          </button>
        </template>
        <template v-else>
          <RouterLink
            to="/login"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            登录
          </RouterLink>
          <RouterLink
            to="/register"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50"
            @click="isMenuOpen = false"
          >
            注册
          </RouterLink>
        </template>
      </div>
    </div>
  </nav>
</template>